<!--
 * @Author: your name
 * @Date: 2021-08-21 14:55:06
 * @LastEditTime: 2021-08-21 21:57:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\profile\Register.vue
-->
<template>
  <div>
    <NavBar>
      <template v-slot:center> 用户注册 </template>
    </NavBar>

    <div style="margin-top: 50px">
      <div style="text-align: center; padding-top: 20px">
        <van-image
          width="10rem"
          height="10rem"
          fit="contain"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg11.weikeimg.com%2Fdata%2Fuploads%2F2015%2F07%2F28%2F16298604855b774777d1d0.png"
        />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="password_confirmation"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ required: true, message: '确认密码' }]"
        />
        <van-field
          v-model="email"
          name="电子邮箱"
          label="电子邮箱"
          placeholder="电子邮箱"
          :rules="[{ required: true, message: '请填写电子邮箱' }]"
        />
        <div style="margin: 16px">
            <div class="link-login" @click="$router.push({path:'/login'})">
                已有账号，立即登录
            </div>
          <van-button
            round
            block
            type="info"
            color="#3498DB"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { ref, reactive, toRefs } from "vue";
import { register } from "network/user";
import { Dialog, Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  name: "Register",
  components: {
    NavBar,
  },
  setup() {
    const router = useRouter();

    const userinfo = reactive({
      name: "",
      password: "",
      password_confirmation: "",
      email: "",
    });

    const onSubmit = () => {
      //先验证
      if (userinfo.password != userinfo.password_confirmation) {
        Dialog.confirm({
          message: "两次密码不一致",
        })
          .then(() => {
            userinfo.password_confirmation = "";
          })
          .catch(() => {
            // on cancel
          });
      } else {
        //提交给服务器
        register(userinfo).then((res) => {
          //   console.log(res);
          if (res.status == "201") {
            Toast.success("注册成功");
            setTimeout(() => {
                router.push({
                    path:'/login'
                })
            }, 1000);
          }
          userinfo.password=''
          userinfo.password_confirmation=''
        });
      }
    };

    return {
      ...toRefs(userinfo),
      onSubmit,
    };
  },
};
</script>

<style scoped>
    .link-login{
        font-size: 14px;
        margin-bottom: 20px;
        color: #48C9B0;
        display: inline-block;
    }
</style>